<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>打卡操作</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        .progress-bar {
            height: 8px;
            background: linear-gradient(90deg, #4F46E5 60%, #E5E7EB 40%);
        }
        .quantity-input {
            -webkit-appearance: none;
            margin: 0;
        }
        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(0.95); }
        }
        .pulse { animation: pulse 0.5s ease-in-out; }
    </style>
</head>
<body class="bg-gray-50">
    <!-- 顶部导航 -->
    <nav class="bg-white p-4 shadow-sm flex justify-between items-center">
        <a href="plan-detail.html" class="text-gray-600">
            <i class="fas fa-arrow-left"></i>
        </a>
        <h1 class="text-lg font-semibold">每日阅读计划</h1>
        <div class="w-6"></div> <!-- 占位保持对称 -->
    </nav>

    <!-- 主要内容 -->
    <div class="p-4">
        <!-- 计划信息 -->
        <div class="bg-white rounded-lg p-4 shadow-sm mb-4">
            <div class="text-center mb-3">
                <p class="text-gray-500">第3周/共12周</p>
                <div class="flex justify-center items-center mt-2">
                    <span class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-sm">
                        <i class="fas fa-check-circle mr-1"></i>
                        3/5次达标
                    </span>
                </div>
            </div>
            
            <!-- 打卡区域 -->
            <div class="border-t pt-4">
                <h3 class="text-sm font-medium text-gray-700 mb-3">今日阅读时长</h3>
                
                <!-- 数量打卡模式 -->
                <div class="flex items-center justify-between mb-4">
                    <button class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center">
                        <i class="fas fa-minus text-gray-600"></i>
                    </button>
                    <div class="flex-1 mx-4 text-center">
                        <input type="number" value="30" 
                               class="quantity-input text-2xl font-bold text-center w-full bg-transparent border-none">
                        <span class="text-gray-500">分钟</span>
                    </div>
                    <button class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center">
                        <i class="fas fa-plus text-gray-600"></i>
                    </button>
                </div>
                
                <div class="progress-bar rounded-full mb-2"></div>
                <p class="text-sm text-gray-500 text-center">本周累计 120/300 分钟 (日均还需 30 分钟)</p>
            </div>
        </div>
        
        <!-- 照片上传 -->
        <div class="bg-white rounded-lg p-4 shadow-sm mb-4">
            <h3 class="text-sm font-medium text-gray-700 mb-3">上传阅读照片</h3>
            <div class="grid grid-cols-3 gap-2">
                <div class="aspect-square bg-gray-100 rounded-lg flex items-center justify-center">
                    <i class="fas fa-plus text-gray-400 text-xl"></i>
                </div>
                <div class="aspect-square bg-gray-100 rounded-lg overflow-hidden">
                    <img src="https://ai-public.mastergo.com/ai/img_res/e922dec385b07b17231a0e8f8f048fcb.jpg" 
                         class="w-full h-full object-cover">
                </div>
            </div>
        </div>
        
        <!-- 备注输入 -->
        <div class="bg-white rounded-lg p-4 shadow-sm mb-4">
            <h3 class="text-sm font-medium text-gray-700 mb-3">记录心得</h3>
            <textarea class="w-full p-3 border border-gray-200 rounded-lg focus:outline-none focus:ring-1 focus:ring-primary" 
                      rows="3" placeholder="记录今日阅读心得或特殊情况..."></textarea>
            <div class="flex flex-wrap mt-2">
                <span class="text-xs bg-gray-100 px-2 py-1 rounded mr-2 mb-2">#设计书籍</span>
                <span class="text-xs bg-gray-100 px-2 py-1 rounded mr-2 mb-2">#学习笔记</span>
                <span class="text-xs bg-gray-100 px-2 py-1 rounded mr-2 mb-2">#重点章节</span>
            </div>
        </div>
        
        <!-- 打卡按钮 -->
        <button id="checkin-btn" class="w-full py-3 bg-primary text-white font-bold rounded-lg shadow-md hover:shadow-lg transition-all">
            确认打卡
        </button>
    </div>

    <script>
        // 获取计划ID
        const planId = new URLSearchParams(window.location.search).get('planId') || '1';
        
        document.getElementById('checkin-btn').addEventListener('click', function() {
            // 模拟打卡成功后跳转
            window.location.href = `d:\\ideaItem\\myDome\\sign-web\\plan\\ui原型\\plan-detail.html?id=${planId}`;
        });
    
        // 返回按钮
        document.querySelector('nav a').addEventListener('click', function(e) {
            e.preventDefault();
            window.location.href = `d:\\ideaItem\\myDome\\sign-web\\plan\\ui原型\\plan-detail.html?id=${planId}`;
        });
    </script>
</body>
</html>